<!--
 * @Author: fisher
 * @Date: 2024-01-02 11:40:05
 * @LastEditTime: 2024-01-12 10:44:33
 * @LastEditors: fisher
 * @Description: 
 * @FilePath: \front-end-template\src\modules\DataManage\tasks\modules\task.vue
-->
<template>
  <div>
    <div class="operate">
      <div class="search">
        <!-- <div class="search_item">
          <span>账户：</span>
          <fks-input
            class="search_item_input"
            v-model="createBy"
            placeholder="请输入"
          ></fks-input>
        </div> -->
        <div class="search_item">
          <span>源数据名称：</span>
          <fks-input
            v-model="sourcePath"
            class="search_item_input"
            placeholder="请输入"
            @input="inputSourcePath"
          ></fks-input>
        </div>
        <div class="search_item">
          <span>类型：</span>
          <fks-select
            v-model="taskType"
            class="search_item_input"
            placeholder="请选择"
            @change="checkType"
          >
            <fks-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></fks-option>
          </fks-select>
        </div>
        <div class="search_item">
          <span>任务开始时间：</span>
          <fks-date-picker
            v-model="createDate"
            class="search_item_input"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="getCreateDate"
          ></fks-date-picker>
        </div>
        <!-- <div class="search_item">
          <span>数据保留剩余时间：</span>
          <fks-date-picker
            class="search_item_input"
            v-model="keepTime"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </fks-date-picker>
        </div> -->
        <div class="search_item">
          <span>状态：</span>
          <fks-select
            v-model="taskStatus"
            class="search_item_input"
            placeholder="请选择"
            @change="checkStatus"
          >
            <fks-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></fks-option>
          </fks-select>
        </div>
      </div>
      <div class="btns">
        <div class="btn btn_prime" @click="search">查询</div>
        <div class="btn" :class="{ btn_prime: multipleSelection.length }" @click="deleteTask">
          批量删除
        </div>
      </div>
    </div>
    <taskDetail
      ref="taskDetail"
      :search-data="searchData"
      :search-params="searchParams"
      class="taskDetail"
      @multipleSelect="multipleSelect"
      @logs="logs"
    ></taskDetail>
    <div>
      <logsDialog v-if="logsVisiable" :job-data="jobData" @close="closeLogs"></logsDialog>
    </div>
  </div>
</template>

<script>
import taskDetail from './taskDetail.vue'
import logsDialog from '../components/logsDialog.vue'
import { getWarehouseList } from '../../templates/api.js'
import { deleteTask } from '../api.js'
export default {
  //import引入组件才能使用
  components: { taskDetail, logsDialog },
  props: {},
  data() {
    return {
      jobData: {},
      typeOptions: [],
      statusOptions: [
        {
          label: '无',
          value: ''
        },
        {
          label: '未开始',
          value: '0'
        },
        {
          label: '进行中',
          value: '1'
        },
        {
          label: '排队中',
          value: '2'
        },
        {
          label: '任务完成',
          value: '3'
        },
        {
          label: '任务取消',
          value: '4'
        },
        {
          label: '任务失败',
          value: '-1'
        }
      ],
      taskStatus: null,
      taskType: null,
      createDate: [],
      keepTime: [],
      sourcePath: '',
      createBy: '',
      searchData: {},
      searchParams: {},
      multipleSelection: [],
      logsVisiable: false
    }
  },
  // 计算属性
  computed: {},
  // 监听data中的数据变化
  watch: {},
  // 生命周期，创建完成时（可以访问当前this实例）
  created() {},
  // 生命周期：挂载完成时（可以访问DOM元素）
  mounted() {
    this.getTaskType()
  },
  beforeCreate() {}, //生命周期：创建之前
  beforeMount() {}, //生命周期：挂载之前
  beforeUpdate() {}, //生命周期：更新之前
  updated() {}, //生命周期：更新之后
  beforeDestroy() {}, //生命周期：销毁之前
  destroyed() {}, //生命周期：销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发执行
  // 方法集合
  methods: {
    logs(val) {
      this.jobData = val
      this.logsVisiable = true
    },
    getTaskType() {
      const templist = localStorage.getItem('taskTypeOptions')
      if (templist) {
        this.typeOptions = [...JSON.parse(templist)]
        return
      }
      getWarehouseList({}, { pageNo: 1, pageSize: 99999 }).then((res) => {
        if (res.status) {
          const data = res.data.list
          const list = []
          data.forEach((item) => {
            list.push({
              label: item.warehouseName,
              value: item.id
            })
          })
          list.unshift({
            label: '无',
            value: ''
          })
          this.typeOptions = [...list]
          localStorage.setItem('taskTypeOptions', JSON.stringify([...list]))
        }
      })
    },
    search() {
      this.$refs.taskDetail.getData()
    },
    checkStatus(val) {
      if (!val) this.taskStatus = null
      this.searchData.status = this.taskStatus
      console.log('this.searchData', this.searchData)
    },
    checkType(val) {
      if (!val) this.taskType = null
      this.searchData.warehouseId = this.taskType
    },
    inputSourcePath(val) {
      this.searchData.sourceName = val
    },
    getCreateDate(val) {
      console.log('val', val)
      if (val && val.length) {
        this.searchParams.minCreateTime = val[0]
        this.searchParams.maxCreateTime = val[1]
      } else {
        this.searchParams.minCreateTime = ''
        this.searchParams.maxCreateTime = ''
      }
    },
    multipleSelect(val) {
      this.multipleSelection = [...val]
    },
    closeLogs() {
      this.logsVisiable = false
    },

    deleteTask() {
      if (!this.multipleSelection.length) {
        this.$notify.info({
          title: '消息',
          message: '请选择删除项，再继续删除！'
        })
        return false
      } else {
        this.$confirm('是否删除该任务?', '删除任务', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          deleteMode: true
        })
          .then(() => {
            const ids = this.multipleSelection.map((item) => {
              return item.id
            })
            deleteTask(ids).then((res) => {
              if (res.status) {
                this.$message({
                  message: '删除成功！',
                  type: 'success'
                })
                this.$refs.taskDetail.getData()
              }
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    }
  }
}
</script>
<style scoped lang="scss">
.operate {
  display: flex;
  align-items: center;
  padding: 40px 0 0;
  .search {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    &_item {
      display: flex;
      align-items: center;
      width: 33.33%;
      height: 36px;
      margin-bottom: 20px;
      gap: 10px;
      span {
        width: 230px;
        text-align: right;
      }
      &_input {
        width: 55%;
        ::v-deep .fks-range-separator {
          width: 25px;
        }
      }
    }
  }
  .btns {
    margin-right: 30px;
    margin-left: 40px;
  }
  .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 36px;
    // 当前页面特殊间距
    margin-bottom: 20px;
    border-radius: 2px;
    font-weight: 400;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC, Helvetica, Arial, sans-serif !important;
    color: #262626;
    background: #d8d8d8;
    cursor: pointer;
  }
  .btn:hover {
    box-shadow: 0 0 3px 0 #666;
    opacity: 0.85;
  }
  .btn_prime {
    color: #fff;
    background: #3f9eff;
  }
}

.taskDetail {
  width: 100%;
  height: calc(100% - 162px);
  margin-top: 10px;
}
</style>
